<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TimeDifference.js获取时间差插件</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="./TimeDifference.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <style>
        .well2{
            background-color: #fff;
            border:0px;
            padding:19px;
            min-height: 20px;
            color:slategrey;
        }
        .form-control{
            width:50%;
        }
    </style>
</head>

<body>
    <div class="container" style="margin-bottom:200px;">
        <div class="row">
            <div class="jumbotron">
                <h2><img src="./logo.png" alt="" width="70px">
                    @ Postbird</h2>
                    <p><a href="mailto:ptbird@yeah.net" class="btn btn-primary btn-sm">email：ptbird@yeah.net ></a></p>
                    <p><a href="http://www.ptbird.cn" class="btn btn-success btn-sm">website：www.ptbird.cn  ></a></p>
                    <p><small>本页面采用 bootcss cdn服务的bootstrap&jquery，如页面显示不正常或jquery无反应，请确认网络连接正确。</small></p>
                    <p><small>POSTBIRD:There I am ,in the world more exciting!</small></p>
            </div>
            <div class="page-header">
                    <h1>jquery 获取时间差插件（极致小）<small>TimeDifference.js</small> </h1>
            </div>
            <div class="page-header">
                <h2>该插件发布时间：<small id="allDemo"></small> </h2>
                <script>$("#allDemo").text(timeDifference("2016-06-05 10:11:00"));</script>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="">Demo1 <font color="red">[ 2016-5-3 10:20:23 ]</font></h4>
                    </div>
                    <div class="panel-body">
                        <div class="well2">
                            注：1、时间的默认格式为 <font color="red" id="demo1Font">2016-06-03 10:20:23  </font><br>
                            注：2、如果是其他格式的时间，则需要转换成  <font color="red">yyyy-mm-dd H:m:s</font>  格式！<br>
                            或直接修改代码部分：
                            <pre> var nowTimeStamp = tmpTime ? Date.parse(tmpTime.replace(/-/gi,"/")) : new Date().getTime();//将 yyyy-mm-dd H:m:s 进行正则匹配</pre>
                        </div>
                    </div>
                    <div class="panel-footer">
                        距离目前时间差：
                        <strong><font color="red"><span id="timeDifferenceDemo1"></span></font></strong>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="">Demo1 <font color="red">[ 2016-06-05 10:02:23 ]</font></h4>
                    </div>
                    <div class="panel-body">
                        <div class="well2">
                            注：1、时间的默认格式为 <font color="red" id="demo2Font">2016-06-05 10:02:23  </font><br>
                            注：2、如果是其他格式的时间，则需要转换成  <font color="red">yyyy-mm-dd H:m:s</font>  格式！<br>
                            或直接修改代码部分：
                            <pre> var nowTimeStamp = tmpTime ? Date.parse(tmpTime.replace(/-/gi,"/")) : new Date().getTime();//将 yyyy-mm-dd H:m:s 进行正则匹配</pre>
                        </div>
                    </div>
                    <div class="panel-footer">
                        距离目前时间差：
                        <strong><font color="red"><span id="timeDifferenceDemo2"></span></font></strong>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header"><h2> 使用说明： </h2> </div>
                <h2><small>一、文件引入：<strong><span><</span><font color="#cd5c5c">script src="./TimeDifference.js"><</font>script></strong></small></h2>
                <h2><small>二、文件说明：</small></h2>
                <div class="well2"> <h4>文件中有一个函数:
                    <br><br> <strong>function  timeDifference(tmpTime){}<small></small></strong>

                <h2><small>三、函数调用： 以第一个demo举例</small></h2>
                <pre ><h4>
                        $("#timeDifferenceDemo2").text(timeDifference($("#demo2Font").text()));

                        /*   主要是  timeDifference(); 的调用 */

                        //直接传值 即可
                </h4></pre>
            </div>
            <div class="col-md-12">
                <div class="page-header"><h2> 版权声明： </h2> </div>
                <h2><small>一、开放使用，您可以在此基础上按需求调整或将函数粘贴出以减少get请求数量。</small></h2>
                <h2><small>二、您可以在此基础上二次包装并再次进行发布。</small></h2>
                <h2><small>三、License ： MIT</small></h2>
            </div>
            <div class="col-md-12">
                <div class="page-header"><h2> JS源代码： </h2> </div>
               <pre>
/** Created by postbird on 2016/4/1.  ...*/
/**
 *      @postbird
 *      1、本插件采用js编写，可直接将函数复制到个人js文件，减少get请求数
 *      2、author：powered by postbird
 *      3、email： ptbird@yeah.net
 *      4、site：http://www.ptbird.cn
 *      5、license : MIT
 * */
/**
 *  函数使用说明：
 *      1、直接调用函数  TimeDifference()
 *          返回说明： 返回距离当前的时间差
 * */
function timeDifference(tmpTime) {
    var mm=1000;//1000毫秒 代表1秒
    var minute = mm * 60;
    var hour = minute * 60;
    var day = hour * 24;
    var month = day * 30;
    var ansTimeDifference=0;//记录时间差
    var tmpTimeStamp = tmpTime ? Date.parse(tmpTime.replace(/-/gi, "/")) : new Date().getTime();//将 yyyy-mm-dd H:m:s 进行正则匹配
    var nowTime = new Date().getTime();//获取当前时间戳
    var tmpTimeDifference = nowTime - tmpTimeStamp;//计算当前与需要计算的时间的时间戳的差值
    if (tmpTimeDifference < 0) {                //时间超出，不能计算
        alert("开始日期大于结束日期，计算失败！");
        return 0;
    }
    /**
     * 通过最开始强调的各个时间段用毫秒表示的数值，进行时间上的取整，为0的话，则没有到达
     * */
    var DifferebceMonth = tmpTimeDifference / month;    //进行月份取整
    var DifferebceWeek = tmpTimeDifference / (7 * day);//进行周取整
    var DifferebceDay = tmpTimeDifference / day;//进行天取整
    var DifferebceHour = tmpTimeDifference / hour;//进行小时取整
    var DifferebceMinute = tmpTimeDifference / minute;//进行分钟取整
    if (DifferebceMonth >= 1) {
        return tmpTime;                 //大于一个月 直接返回时间
    } else if (DifferebceWeek >= 1) {
        ansTimeDifference= parseInt(DifferebceWeek) + "个星期前";
    } else if (DifferebceDay >= 1) {
        ansTimeDifference = parseInt(DifferebceDay) + "天前";
    } else if (DifferebceHour >= 1) {
        ansTimeDifference = parseInt(DifferebceHour) + "个小时前";
    } else if (DifferebceMinute >= 1) {
        ansTimeDifference = parseInt(DifferebceMinute) + "分钟前";
    } else {
        ansTimeDifference = "刚刚";
    }
    return ansTimeDifference;
}

               </pre>
            </div>
            <div class="col-md-12">
                <div class="well text-center">
                    Powered by postbird . &copy;2016
                </div>
            </div>
        </div>
    </div>

<script>
    $(document).ready(function(){
        //2016-5-3 10:20:23
       var demo1Result=timeDifference($("#demo1Font").text());
        $("#timeDifferenceDemo1").text(demo1Result);

        $("#timeDifferenceDemo2").text(timeDifference($("#demo2Font").text()));
    });

</script>
</body>
</html>